<template>
	<view class="main">
		<view class="active_tit">
			<view class="tit">
				{{industry}}
			</view>
			<!-- <view class="add">
				＋
			</view> -->
		</view>
		<!-- input -->
		<!-- <ActiveForm required  ref=''>
			<view class="active_label">
				是否有代理品牌：
			</view>
			<view class="active_input">
				<input type="text" v-model="form.agencyBrand" />
			</view>
		</ActiveForm> -->

		<ActiveForm required ref='storeCount'>
			<view class="active_label">
				店面个数：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.storeCount" />
			</view>
		</ActiveForm>

		<ActiveForm required ref='accRecMonth'>
			<view class="active_label">
				应收账期（月）：
			</view>
			<view class="active_input">
				<input type="number" v-model="form.accRecMonth" />
			</view>
		</ActiveForm>

		<ActiveForm required ref='marginRate'>
			<view class="active_label">
				综合毛利率（%）：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.marginRate" />
			</view>
		</ActiveForm>

		<ActiveForm required ref='turnover12month'>
			<view class="active_label">
				近12个月营业额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="form.turnover12month" />
			</view>
		</ActiveForm>

		<ActiveForm required ref='areaCount'>
			<view class="active_label">
				自购/自建经营场地个数：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.areaCount" />
			</view>
		</ActiveForm>

		<!-- <ActiveForm required  ref=''>
			<view class="active_label">
				入驻商场门店个数：
			</view>
			<view class="active_input">
				<input type="text" v-model="form.inMarketCount" />
			</view>
		</ActiveForm> -->

		<ActiveForm required ref='accPayMonth'>
			<view class="active_label">
				应付账期(月）：
			</view>
			<view class="active_input">
				<input type="number" v-model="form.accPayMonth" />
			</view>
		</ActiveForm>

		<ActiveForm required ref='invoiceRatio'>
			<view class="active_label">
				开票比例（%）：
			</view>
			<view class="active_input">
				<mInput :thousand='false' type="number" v-model="form.invoiceRatio" />
			</view>
		</ActiveForm>

		<ActiveForm required ref='turnoverLast12'>
			<view class="active_label">
				近13-24个月营业额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="form.turnoverLast12" />
			</view>
		</ActiveForm>
		<ActiveForm required ref='nextYearTurnover'>
			<view class="active_label">
				预计未来一年营业额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="form.nextYearTurnover" />
			</view>
		</ActiveForm>

		<view class="active_tit">
			<view class="tit2">
				经营品类信息
			</view>
			
		</view>

		<block v-for="(item,index) in jyplForm">
			<view class="cut">经营品类{{index+1}}
				<uni-icons class="clear" type="clear" @click='stdDel(jyplForm,item,"stdOffsurWholesaleGoods")'></uni-icons>
			</view>
			<ActiveForm required ref=''>
				<view class="active_label">
					序号：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.xh" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='jyplForm.typeName'>
				<view class="active_label">
					品类名称：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.typeName" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='jyplForm.price'>
				<view class="active_label">
					售价（元）：
				</view>
				<view class="active_input">
					<mInput maxlength="16" type="number" v-model="item.price" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='jyplForm.inPrice'>
				<view class="active_label">
					进价（元）：
				</view>
				<view class="active_input">
					<mInput maxlength="16" type="number" v-model="item.inPrice" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='jyplForm.turnoverRatio'>
				<view class="active_label">
					年营业额占比（%）：
				</view>
				<view class="active_input">
					<mInput :thousand='false' type="number" v-model="item.turnoverRatio" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='jyplForm.marginRate'>
				<view class="active_label">
					毛利率（%）：
				</view>
				<view class="active_input">
					<mInput :thousand='false' :disabled="true" type="number" :value="mll(item)" />
				</view>
			</ActiveForm>
			<view class="active_form" style="width: 100%;">
				<view class="active_label">
					详情：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.exComments" />
				</view>
			</view>


		</block>
		<view class="active_tit">
			
			<view class="add" @click="jyplAdd">
				新增经营品类信息
			</view>
		</view>

		<view class="active_tit">
			<view class="tit2 required">
				上下游关系信息：主要客户/下游合作模式分析（前三大客户）
			</view>
			
		</view>

		<block v-for="(item,index) in xiayou">
			<view class="cut">下游客户{{index+1}}
				<uni-icons class="clear" type="clear" @click='stdDel(xiayou,item,"stdOffsurIndustryUpdown")'></uni-icons>
			</view>
			<ActiveForm required ref=''>
				<view class="active_label">
					序号：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.xh" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='entName'>
				<view class="active_label">
					名称：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.entName" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='moneyRatio'>
				<view class="active_label">
					年销售额占比（%）：
				</view>
				<view class="active_input">
					<mInput :thousand='false' type="number" v-model="item.moneyRatio" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='money'>
				<view class="active_label">
					年销售额（元）：
				</view>
				<view class="active_input">
					<mInput maxlength="16" type="number" v-model="item.money" />
				</view>
			</ActiveForm>

			<view class="active_form" style="width: 100%;">
				<view class="active_label">
					详情：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.exComments" />
				</view>
			</view>


		</block>
		<view class="active_tit">
			
			<view class="add" @click="xiayouAdd">
				新增客户
			</view>
		</view>

		<view class="active_tit">
			<view class="tit2 required">
				上下游关系信息：主要供应商/上游合作模式分析（前三大客户）
			</view>
			<!-- <view class="add" @click="shangyouAdd">
				＋
			</view> -->
		</view>

		<block v-for="(item,index) in shangyou" :key='index+100'>
			<view class="cut">上游客户{{index+1}}
				<uni-icons class="clear" type="clear" @click='stdDel(shangyou,item,"stdOffsurIndustryUpdown")'></uni-icons>
			</view>
			<ActiveForm required ref=''>
				<view class="active_label">
					序号：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.xh" />
				</view>
			</ActiveForm>
			<ActiveForm required ref=''>
				<view class="active_label">
					名称：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.entName" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='b'>
				<view class="active_label">
					年采购额占比（%）：
				</view>
				<view class="active_input">
					<mInput :thousand='false' type="number" v-model="item.moneyRatio" />
				</view>
			</ActiveForm>
			<ActiveForm required ref='a'>
				<view class="active_label">
					年采购额（元）：
				</view>
				<view class="active_input">
					<mInput maxlength="16" type="number" v-model="item.money" />
				</view>
			</ActiveForm>

			<view class="active_form" style="width: 100%;">
				<view class="active_label">
					详情：
				</view>
				<view class="active_input">
					<input type="text" v-model="item.exComments" />
				</view>
			</view>
		</block>
		<view class="active_tit">
			
			<view class="add" @click="shangyouAdd">
				新增供应商
			</view>
		</view>

		<view class="active_tit">
			<view class="tit">
				销售额信息
			</view>
			<!-- <view class="add">
				＋
			</view> -->
		</view>
		<!-- input -->
		<ActiveForm required  ref='busyMonths'>
			<view class="active_label" style="width: 22rem;">
				旺季月份：
			</view>
			<view class="active_input">
				<jsfun-picker style="width: 100%;height: 4rem;" mess="备注：旺季,一般,淡季请选择不重复月份" :listArr="priceList" :defaultArr="xseForm.busyMonths"
				 type="multiple" @click="priceChange1">
					<!-- 自定义页面显示元素 -->
					<view class="sl">
						{{xseForm.busyMonths}}
					</view>
				</jsfun-picker>
				<!-- <input type="text" v-model="xseForm.busyMonths" /> -->
			</view>
		</ActiveForm>
		<ActiveForm required ref='busyTurnover'>
			<view class="active_label">
				旺季月均销售额（元）：
			</view>
			<view class="active_input">
				
				<mInput maxlength="16" type="number" v-model="xseForm.busyTurnover" />
			</view>
		</ActiveForm>
		<ActiveForm required ref='middleMonths'>
			<view class="active_label" style="width: 22rem;">
				一般月份：
			</view>
			<view class="active_input">
				<jsfun-picker style="width: 100%;height: 4rem;" mess="备注：旺季,一般,淡季请选择不重复月份" :listArr="priceList" :defaultArr="xseForm.middleMonths"
				 type="multiple" @click="priceChange2">
					<!-- 自定义页面显示元素 -->
					<view class="sl">
						{{xseForm.middleMonths}}
					</view>
				</jsfun-picker>
				
				<!-- <input type="text" v-model="xseForm.middleMonths" /> -->
			</view>
		</ActiveForm>
		<ActiveForm required ref='middleTurnover'>
			<view class="active_label">
				一般月均销售额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="xseForm.middleTurnover" />
			</view>
		</ActiveForm>
		<ActiveForm required ref='lowMonths'>
			<view class="active_label" style="width: 22rem;">
				淡季月份：
			</view>
			<view class="active_input">
				<jsfun-picker style="width: 100%;height: 4rem;" mess="备注：旺季,一般,淡季请选择不重复月份" :listArr="priceList" :defaultArr="xseForm.lowMonths"
				 type="multiple" @click="priceChange3">
					<!-- 自定义页面显示元素 -->
					<view class="sl">
						{{xseForm.lowMonths}}
					</view>
				</jsfun-picker>
				<!-- <input type="text" v-model="xseForm.lowMonths" /> -->
			</view>
		</ActiveForm>
		<ActiveForm required ref='lowTurnover'>
			<view class="active_label">
				淡季月均销售额（元）：
			</view>
			<view class="active_input">
				<mInput maxlength="16" type="number" v-model="xseForm.lowTurnover" />
			</view>
		</ActiveForm>

		<!-- <button type="default" @click="getForm">getForm</button> -->
	</view>
</template>

<script>
	import jsfunPicker from '@/components/jsfun-picker/jsfun-picker.vue'
	export default {
		name: 'activeForm',
		data() {
			return {
				priceList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				priceDefault: '',
				province: "",
				city: "",
				county: "",
				index: 1,
				form: {},
				xseForm: {
					busyMonths:'',
					middleMonths:'',
					lowMonths:'',
				},
				shangyou: [],
				xiayou: [],
				jyplForm: [],
				industry:''
			}
		},
		components: {
			jsfunPicker
		},
		computed:{
			mll(){
				return function(item) {
					
				    if(Number(item.price)===0){
						item.marginRate=0
						return 0
					}else{
						item.marginRate=((1-(Number(item.inPrice)/Number(item.price)))*100).toFixed(2)
						return item.marginRate
					}
					
				}
			}
		},
		props:{
			changeFlag: {
			},
		},
		watch: {
			changeFlag:{
				handler:function(res){
					console.log(getApp().globalData.stdOffsurEntBasic.industry)
					if(getApp().globalData.stdOffsurEntBasic.industry=='01'){
						this.industry = '批发零售类' 
					}else{
						this.industry = '其他类' 
					}
					
				},
				deep:true
			},
			xseForm: {
				handler: function(res) {
					//console.warn('销售额数据变化', res)
					getApp().globalData.stdOffsurIndustryTurnover = res
				},
				deep: true
			},
			jyplForm: {
				handler: function(res) {
					//console.warn('经营品类组件数据变化', res)
					getApp().globalData.stdOffsurWholesaleGoods = res
				},
				deep: true
			},
			form: {
				handler: function(res) {
					//console.warn('批发零售类组件数据变化', res)
					getApp().globalData.stdOffsurWholesale = res
				},
				deep: true
			},
			shangyou: {
				handler: function(res) {
					//console.warn('shangyou', res)
					getApp().globalData.shangyou01 = res
				},
				deep: true
			},
			xiayou: {
				handler: function(res) {
					//console.warn('xiayou', res)
					getApp().globalData.xiayou01 = res
				},
				deep: true
			}
		},
		mounted() {
			
			//获取返显数据
			setTimeout(() => {
				
				//数据反显
				this.form = getApp().globalData.stdOffsurWholesale
				this.xseForm = getApp().globalData.stdOffsurIndustryTurnover
				this.jyplForm = getApp().globalData.stdOffsurWholesaleGoods
				let arr = getApp().globalData.stdOffsurIndustryUpdown
				for (let i = 0; i < arr.length; i++) {
					if(getApp().globalData.stdOffsurEntBasic.industry==='01'){
						if (arr[i].industry == '01' && arr[i].updownFlag == '01') {
							this.shangyou.push(arr[i])
						} else if (arr[i].industry == '01' && arr[i].updownFlag == '02') {
							this.xiayou.push(arr[i])
						}
						
					}else if(getApp().globalData.stdOffsurEntBasic.industry==='06'){
						if (arr[i].industry == '06' && arr[i].updownFlag == '01') {
							this.shangyou.push(arr[i])
						} else if (arr[i].industry == '06' && arr[i].updownFlag == '02') {
							this.xiayou.push(arr[i])
						}
						
					}
					
				}
				this.priceList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			}, getApp().globalData.timeout)
		},


		methods: {
			priceChange1(data) {
				
				if(this.xseForm.busyMonths===null){
					this.xseForm.busyMonths=''
				}
				if(this.xseForm.middleMonths===null){
					this.xseForm.middleMonths=''
				}
				if(this.xseForm.lowMonths===null){
					this.xseForm.lowMonths=''
				}

				let flag = false
				let removeArr = [...this.xseForm.middleMonths.split(','),...this.xseForm.lowMonths.split(',')]
				let arr = data.textStr.split(',')
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<removeArr.length;j++){
						if(arr[i]==removeArr[j]){
							arr.remove(arr[i])
							flag = true
						}
					}
				}
				
				setTimeout(()=>{
					if(flag){
						uni.showToast({
							title:'选择有重复，已自动移除',
							icon:"none",
							duration:2000
						})
						data.textStr = arr.toString()
						this.xseForm.busyMonths = arr.toString()
					}else{
						this.xseForm.busyMonths = data.textStr
					}
				},300)
			    
				
				
			},
			priceChange2(data) {
				if(this.xseForm.busyMonths===null){
					this.xseForm.busyMonths=''
				}
				if(this.xseForm.middleMonths===null){
					this.xseForm.middleMonths=''
				}
				if(this.xseForm.lowMonths===null){
					this.xseForm.lowMonths=''
				}
				let flag = false
				let removeArr = [...this.xseForm.busyMonths.split(','),...this.xseForm.lowMonths.split(',')]
				let arr = data.textStr.split(',')
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<removeArr.length;j++){
						if(arr[i]==removeArr[j]){
							arr.remove(arr[i])
							flag = true
						}
					}
				}
				
				setTimeout(()=>{
					if(flag){
						uni.showToast({
							title:'选择有重复，已自动移除',
							icon:"none",
							duration:2000
						})
						data.textStr = arr.toString()
						this.xseForm.middleMonths = arr.toString()
					}else{
						this.xseForm.middleMonths = data.textStr
					}
				},300)
				
			
			},
			priceChange3(data) {
				if(this.xseForm.busyMonths===null){
					this.xseForm.busyMonths=''
				}
				if(this.xseForm.middleMonths===null){
					this.xseForm.middleMonths=''
				}
				if(this.xseForm.lowMonths===null){
					this.xseForm.lowMonths=''
				}
				let flag = false
				let removeArr = [...this.xseForm.busyMonths.split(','),...this.xseForm.middleMonths.split(',')]
				let arr = data.textStr.split(',')
				for(let i=0;i<arr.length;i++){
					for(let j=0;j<removeArr.length;j++){
						if(arr[i]==removeArr[j]){
							arr.remove(arr[i])
							flag = true
						}
					}
				}
				
				setTimeout(()=>{
					if(flag){
						uni.showToast({
							title:'选择有重复，已自动移除',
							icon:"none",
							duration:2000
						})
						data.textStr = arr.toString()
						this.xseForm.lowMonths = arr.toString()
					}else{
						this.xseForm.lowMonths = data.textStr
					}
				},300)
			
				
			
			},
			xiayouAdd() {
				let obj = {
					"businessId": "",
					"createTime": "",
					"createUser": "",
					"customerId": "",
					"customerSystemId": "",
					"deleteFlag": "",
					"entId": "",
					"entName": "",
					"entityRoleType": "",
					"exComments": "",
					"getDatTime": "",
					"imageUrl": "",
					"industry": getApp().globalData.stdOffsurEntBasic.industry,
					"money": '',
					"moneyRatio": '',
					"reqId": "",
					"sourceSystem": "",
					"updateTime": "",
					"updateUser": "",
					"updownFlag": "02",
					"uuid": "",
					"xh": this.xiayou.length + 1
				}
				if(this.xiayou.length<3){
					this.xiayou.push(obj)
				}else{
					uni.showToast({
						title: '已添加三条信息，无法继续增加',
						icon: "none",
						duration: 2000
					})
				}
				
			},
			shangyouAdd() {
				let obj = {
					"businessId": "",
					"createTime": "",
					"createUser": "",
					"customerId": "",
					"customerSystemId": "",
					"deleteFlag": "",
					"entId": "",
					"entName": "",
					"entityRoleType": "",
					"exComments": "",
					"getDatTime": "",
					"imageUrl": "",
					"industry": getApp().globalData.stdOffsurEntBasic.industry,
					"money": '',
					"moneyRatio": '',
					"reqId": "",
					"sourceSystem": "",
					"updateTime": "",
					"updateUser": "",
					"updownFlag": "01",
					"uuid": "",
					"xh": this.shangyou.length + 1
				}
				
				if(this.shangyou.length<3){
					this.shangyou.push(obj)
				}else{
					uni.showToast({
						title: '已添加三条信息，无法继续增加',
						icon: "none",
						duration: 2000
					})
				}
			},
			jyplAdd() {
				let obj = {
					"businessId": "",
					"createTime": "",
					"createUser": "",
					"customerId": "",
					"customerSystemId": "",
					"deleteFlag": "",
					"entId": "",
					"entityRoleType": "",
					"exComments": "",
					"getDatTime": "",
					"imageUrl": "",
					"inPrice": '',
					"marginRate": '',
					"price": '',
					"reqId": "",
					"sourceSystem": "",
					"turnoverRatio": '',
					"typeName": "",
					"updateTime": "",
					"updateUser": "",
					"uuid": "",
					"xh": this.jyplForm.length + 1
				}
				this.jyplForm.push(obj)
			}

		}
	}
</script>

<style lang="scss">


</style>
